<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>webpack打包最基础的js文件</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" media="screen" title="no title" charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js" charset="utf-8"></script>

  <script src="https://unpkg.com/vue@2.6.11"></script>
  <script src="https://unpkg.com/axios@0.26.1"></script>
  <!--  <script src="https://unpkg.com/vuetable-2@1.6.0"></script>-->

  <script src="myvuetable-2-full.js"></script>

  <script src="vuetable_localdata.js"></script>
</head>
<!--Vue.component("vuetable", Vuetable);-->
<!--Vue.component("vuetable-pagination", VuetablePagination);-->
<!--Vue.component("vuetable-pagination-dropdown", VuetablePaginationDropDown);-->
<!--Vue.component("vuetable-pagination-info", VuetablePaginationInfo);-->
<body>
<div id="app">
  <vuetable ref="vuetable" :api-mode=true api-url="https://vuetable.ratiw.net/api/users" :fields=vuetable_fields pagination-path=""  @vuetable:pagination-data="onPaginationData">
  </vuetable>
  <div class="vuetable-pagination ui basic segment grid">
    <vuetable-pagination-info ref="paginationInfo"></vuetable-pagination-info>
    <vuetable-pagination ref="pagination" @vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
  </div>
</div>

<script type="text/javascript">
  var divMainVm;
  var g_vue;

  $(function(){
//  			Vue.use(Vuetable)

    Vuetable.install(Vue);

//				Vue.component("m_vuetable", Vuetable.Vuetable);
////				Vuetable.VueTablePagination.name = 'm_vuetable_pagination';
//			    Vue.component("m_vuetable_pagination", Vuetable.VuetablePagination);
////			    Vue.component("m_vuetable_pagination", Vuetable.VuetablePaginationDropDown);
//			    Vue.component("m_vuetable_pagination_info", Vuetable.VuetablePaginationInfo);
//
    divMainVm = new Vue({
      el: '#app',
      created: function(){
        console.log("created");
      },
      mounted: function(){
        console.log("mounted");
        g_vue = this;
      },
      data:{
        localData: g_local_data.data,
        vuetable_fields: [
          'name', 'email', 'birthdate',
          {
            name: 'gender',
            titleClass: 'center aligned',
            dataClass: 'center aligned',
            callback: 'genderLabel'
          },
          {
            name: 'address.line1',
            title: 'Address 1',
            titleClass: 'layui-bg-red layui-table-header',
            dataClass: 'center aligned layui-table-cell'
          },
          {
            name: 'address.line2',
            title: 'Address 2'
          },
          {
            name: 'address.zipcode',
            sortField: 'address.zipcode',
            title: 'Zipcode'
          }
        ],

        in_edit: false,
        optionData: [{
          value: 123,
          label: "选项1"
        }
        ], //下拉框 值
        subjectValSelected: null,
        subjectLabelSelected: null,
      },
      methods:{
        handleSelect: function(val) {
          //点击下拉框 刷新左中数据
          this.subjectValSelected = val.value;
          this.subjectLabelSelected = val.label;
          //				      this.getLeftMiddleDataFn(this.selectVal);
        },
        genderLabel: function(value) {
          return value === 'M'
            ? '<span class="ui teal label"><i class="large man icon"></i>Male</span>'
            : '<span class="ui pink label"><i class="large woman icon"></i>Female</span>'
        },
        onPaginationData : function(paginationData) {
          this.$refs.pagination.setPaginationData(paginationData);
          this.$refs.paginationInfo.setPaginationData(paginationData)  ;
        },
        onChangePage : function(page) {
          this.$refs.vuetable.changePage(page)
        }
      }
    })
  })

</script>

</body>
</html>
